@import "./common.scss";
@mixin icon-load-up {
    // 加载图标
    .icon-load {
        position: absolute;
        bottom: 120px;
        left: 50%;
        transform: translateX(-50%);
        width: 90px;
        height: 60px;
        text-align: center;
        .iconLoad {
            font-size: 50px;
            color: #ccc;
        }
        .loading {
            color: #ccc;
            font-size: 26px;
            margin-top: 30px;
        }
    }
    // 向上图标
    .icon-up {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 30px;
        background: red;
        text-align: center;
        .iconUp {
            font-size: 30px;
            color: #fff;
        }
    }
}

.banner {
    padding: 0 100px;
    margin: 0 auto;
    width: 1000px;
    height: 230px;
    background-color: #fff;
    .banner-title {
        padding: 75px 50px 50px;
        display: flex;
        .title {
            margin: 0 30px;
            font-size: 50px;
            &:hover {
                cursor: pointer;
                color: red;
            }
        }
    }
    .classify {
        ul {
            margin-left: 30px;
            display: flex;
            justify-content: space-between;
            li {
                font-size: 20px;
                select {
                    font-size: large;
                }
            }
        }
    }
}

.greyCont {
    position: relative;
    margin: 0 auto;
    width: 1200px;
    height: 2700px;
    background-color: #f3f3f3;
    padding: 0 50px;
    .itemsBox {
        width: 100%;
        height: 95%;
        display: flex;
        justify-content: space-between;
        .item-col {
            width: 390px;
            height: 500px;
            .item {
                // position: relative;
                margin-bottom: 20px;
                width: 100%;
                background-color: #fff;
                .imgBox {
                    position: relative;
                    .icon-like {
                        display: none;
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        i {
                            color: #fff;
                            font-size: 30px;
                            margin-right: 20px;
                        }
                    }
                }
                .item-info {
                    position: relative;
                    padding: 30px 15px 10px;
                    p:nth-of-type(1) {
                        font-size: 20px;
                        color: #333;
                    }
                    p:nth-of-type(2) {
                        color: #888;
                        margin: 20px 0;
                    }
                    p:nth-of-type(3) {
                        text-align: right;
                        font-size: 14px;
                        color: #666;
                    }
                    .oil {
                        position: absolute;
                        font-size: 20px;
                        right: 30px;
                        top: 30px;
                        color: #888;
                    }
                }
            }
            .item:hover {
                cursor: pointer;
                .icon-like {
                    display: block;
                }
            }
            .item-630 {
                height: 630px;
            }
            .item-445 {
                height: 445px;
            }
            .item-430 {
                height: 430px;
            }
            .item-665 {
                height: 665px;
            }
            .item-440 {
                height: 440px;
            }
            .item-750 {
                height: 750px;
            }
            .item-700 {
                height: 700px;
            }
            .item-500 {
                height: 500px;
            }
            .item-450 {
                height: 450px;
            }
        }
    }
    @include icon-load-up;
}